<template>
  <el-aside
    :width="isCollapse ? '64px' : '200px'"
    style="
      background-color: #032121;
      height: calc(100vh);
      overflow-y: auto;
      transition: all 0.3s;
      overflow-x: hidden;
    "
  >
    <h1 class="logo">
      <span v-show="!isCollapse">xx CMS</span>
      <i v-show="isCollapse" class="el-icon-platform-eleme"></i>
    </h1>
    <el-menu
      :collapse="isCollapse"
      class="border-none home-menu"
      :default-active="defaultActive"
      background-color="#032121"
      text-color="#ccc"
      active-text-color="#fefefe"
      collapse-transition
    >
      <el-submenu :index="'' + item.id" v-for="item in menus" :key="item.id">
        <template slot="title">
          <i v-if="item.path === 'users'" class="el-icon-user-solid"></i>
          <i v-else-if="item.path === 'rights'" class="el-icon-lock"></i>
          <i v-else-if="item.path === 'goods'" class="el-icon-s-goods"></i>
          <i v-else-if="item.path === 'orders'" class="el-icon-s-order"></i>
          <i v-else class="el-icon-s-marketing"></i>
          <span slot="title">{{ item.authName }}</span>
        </template>
        <el-menu-item
          :index="'/' + _item.path"
          v-for="_item in item.children"
          :key="_item.id"
          @click="handleRoute(_item.path)"
          >{{ _item.authName }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  props: ["menus", "isCollapse", "defaultActive"],
  methods: {
    handleRoute(val) {
      this.$emit("handleRoute", val);
    },
  },
};
</script>
<style scoped lang="stylus">
.logo
    height: 60px;
    position: relative;
    line-height: 60px;
    text-align: center
    font-size: 24px
    -webkit-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
    background-color: #053434;
    box-sizing: border-box
    color: #fff
    box-shadow: 2px 0 6px rgb(0 21 41 / 35%)
.el-menu li.is-active
  background-color #2d8cf0!important
.border-none
  border none
.home-menu:not(.el-menu--collapse)
  width: 200px
  transition: all .3s
.el-menu .el-menu-item
    background-color: #101117!important
</style>
